import React, { memo, useEffect } from 'react'
import MainWrapper from '@/common/MainWrapper'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { getUserWallAction } from '@/store/blog/actionCreators'
import FallPicture from '@/components/b_fall_picture'

function B_Wall(props) {
  const { userId } = props
  const dispatch = useDispatch()

  useEffect(() => {
    document.title = '衣柜'
    userId && dispatch(getUserWallAction(userId))
  }, [dispatch, userId])

  const { walls = [] } = useSelector(
    (state) => ({
      walls: state.blogReducer.getIn(['walls'])
    }),
    shallowEqual
  )

  return (
    <MainWrapper>
      <FallPicture walls={walls} />
    </MainWrapper>
  )
}

export default memo(B_Wall)
